<template>
    <div
        class="logo-box ht-56 fx-ct-ct ts-al"
        :class="[{ 'wd-60 pd-rt-0': keyCollapse }, { 'wd-235 pd-rt-56': !keyCollapse }]"
    >
        <img class="logo" src="~@/assets/common/logo.png" />
        <template v-if="!keyCollapse">
            <img class="logo-name" src="~@/assets/common/logo_name.png" />
        </template>
    </div>
</template>

<script lang="ts" setup>
const keyCollapse = ref(false);
</script>

<style lang="scss" scoped>
.logo-box {
    background: transparent url('~@/assets/common/logo_bg.png') no-repeat;
    background-size: cover;

    .logo {
        width: 36px;
        height: 36px;
        object-fit: contain;
    }

    .logo-name {
        margin: 0 8px;
        width: 56px;
        height: 20px;
        object-fit: contain;
    }
}
</style>
